﻿@{
    Layout = "_Layout";
    ViewData["Title"] = "Demo";
}

<el-container>
    <avue-crud :data="tableData" :option="option" :permission="hasPermission" :page.sync="pageOption" :table-loading="loading"
               v-on:refresh-change="refreshChange"
               v-on:row-save="handleRowSave"
               v-on:row-update="handleRowUpdate"
               v-on:row-del="handleRowDel"
               v-on:search-change="searchChange"
               v-on:search-reset="resetChange"
               :cell-style="cellStyle"
               v-on:on-load="onLoad">
        @*<template slot="avatar" slot-scope="scope">
        <el-avatar shape="circle" :src="scope.row.avatar">{{scope.row.account}}</el-avatar>
        </template> *@
        <template slot="record" slot-scope="scope">
            <modify-record :data="scope.row"></modify-record>
        </template>
    </avue-crud>
</el-container>

@section Scripts {
    <script>
        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {

                    themeV: localStorage.getItem('themeV'),
                    name: "demo",
                    pageUrl: `/demo/pages`,
                    addUrl: `/demo/add`,
                    editUrl: `/demo/update`,
                    deleteUrl: `/demo/delete`,

                    option: {
                        searchShowBtn: Permissions.avePermission(`demo:searchBtn`),
                        refreshBtn: Permissions.avePermission(`demo:searchBtn`),
                        menuWidth: '350',
                        rowKey: 'id',
                        searchShow: false,
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },
                            { prop: "code", label: `代码`, slot: true, search: true, hide: false, width: '70', clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "name", label: `名称`, slot: true, search: true,hide: false,  width: '70', clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],},
                            { prop: "isDefault", label: `是否默认`, search: false, hide: false, value: 1, type: "radio", button: true, dicData: [{ label: `默认`, value: 1, }, { label: `未默认`, value: 0, }], width: '80', },
                            { prop: "isDisable", label: `${this.i18n.t('status')}`, search: true, hide: false, value: 0, type: "radio", button: true, dicData: disableDicData, width: '80', },
                            { prop: "sort", label: `排序`, search: false, hide: false, type: "number", value:10,step:10, min:10,max:20000, },
                            { prop: "remark", label: `${this.i18n.t('note')}`, type: 'textarea', hide: true, showColumn: false, span: 24, rows: 2, },
                            { prop: "record", label: `${this.i18n.t('modification_record')}`, slot: true, display: false, showColumn: false, width: 140,align:`center` },
                        ],
                    },

                }
            },
            created() {
                this.selectRow = {};
            },
            methods: {
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex == 7) {
                        if (row.isDisable == 0) {
                            return { color: '#409eff', }
                        }
                        else {
                            return { color: '#f56c6c', }
                        }
                    }
                },
            }
        });
    </script>

}